<template>
	<view class="bg-white travel-card-wrap">
		<view class="space-between pt-32 flex-a pb-24">
			<view class="flex-a card-title">畅游恩施</view>
			<view class="c-grey-86 flex-a fs-24">
				全部
				<text class="arrow-right ml-4"></text>
			</view>
		</view>
		<view class="travel-layout">
			<view class="hy-swiper">
				<swiper
					:circular="true"
					:autoplay="true"
					@change="(event) => (swiperHyIndex = event.detail.current)"
					class="swiper-con"
				>
					<swiper-item v-for="(item, index) in listData" :key="index">
						<view class="hy-item" :style="{ 'background-image': 'url(' + item.img_url + ')' }">
							<view
								class="hy-cover"
								:style="{ 'background-image': 'url(' + imgBaseUrl + 'hy-cover.png' + ')' }"
							/>
							<view class="bottom">
								<view class="name font-500 fs-30 text-center text-ellipsis">
									{{ item.name }}
								</view>
								<view class="fs-22 pt-4 text-center text-ellipsis">直尕思得 恩施要得</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="zjy-swiper-dots">
					<zjy-swiper-dots
						:count="listData.length"
						:current="swiperHyIndex"
						style="bottom: 24rpx; right: 24rpx"
					/>
				</view>
			</view>
			<view class="hy-list">
				<view
					v-for="(item, index) in listData.slice(0, 4)"
					:key="index"
					class="hy-list-item"
					:style="{ 'background-image': 'url(' + item.img_url + ')' }"
				>
					<view class="bottom">
						<view class="name font-500 fs-28 text-ellipsis">
							{{ item.name }}
						</view>
						<view class="fs-20 pt-4 text-ellipsis">中国之中 诗画鹤峰</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
const imgBaseUrl = inject("imgBaseUrl")

defineProps({
	listData: {
		type: Array,
		default: [],
	},
})
const swiperHyIndex = ref<number>(0)
</script>

<style lang="scss" scoped>
.travel-card-wrap {
	padding: 0 24rpx 32rpx 24rpx;
	border-radius: 16rpx;
	.card-title {
		font-weight: 600;
		font-size: 36rpx;
		color: $c-black-1d;
		position: relative;
		&:before {
			content: "";
			position: absolute;
			width: 16%;
			left: 0;
			top: 0;
			bottom: 0;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 221, 0, 0.08));
		}
	}
}
.travel-layout {
	display: flex;
	height: 336rpx;
	.hy-swiper {
		width: 256rpx;
		height: 100%;
		border-radius: 18rpx;
		overflow: hidden;
		position: relative;
		.swiper-con {
			width: 100%;
			height: 100%;
		}
	}
	.zjy-swiper-dots {
		position: absolute;
		width: 100%;
		justify-content: center;
		display: flex;
		bottom: 12rpx;
	}
	.hy-list {
		flex: 1;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		.hy-list-item {
			width: calc(50% - 16rpx);
			height: 160rpx;
			border-radius: 18rpx;
			margin-bottom: 16rpx;
			margin-left: 16rpx;
			background-size: cover;
			position: relative;
			.bottom {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 10px 20rpx;
				font-size: 20rpx;
				color: $c-white;
				background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
				border-bottom-left-radius: 16rpx;
				border-bottom-right-radius: 16rpx;
				.name {
					text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
				}
			}
		}
	}
	.hy-item {
		flex: 1;
		height: 100%;
		background-position: center center;
		background-size: cover;
		padding: 20rpx;
		position: relative;
		overflow: hidden;

		.hy-cover {
			position: absolute;
			background-size: cover;
			left: 0;
			right: 0;
			bottom: 0;
			height: 170rpx;
		}
		.bottom {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 30rpx;
			padding: 16rpx 20rpx;
			color: $c-white;
			text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
		}
	}
}
</style>
